<template>
  <div>
    <div class="top-panel">
      <el-form :model="searchFormData" label-width="50px">
        <el-row>
          <!-- 昵称 -->
          <el-col :span="4">
            <el-form-item label="昵称" prop="nickNameFuzzy">
              <el-input clearable placeholder="请输入昵称" v-model.trim="searchFormData.nickNameFuzzy"
                @keyup.native="loadDataList"></el-input>
            </el-form-item>
          </el-col>
          <!-- 性别 -->
          <el-col :span="4">
            <el-form-item label="性别" prop="sex">
              <el-select clearable placeholder="请选择性别" :style="{ width: '100%' }" v-model="searchFormData.sex">
                <el-option :value="1" label="男"></el-option>
                <el-option :value="0" label="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 状态 -->
          <el-col :span="4">
            <el-form-item label="状态" prop="status">
              <el-select clearable placeholder="请选择状态" :style="{ width: '100%' }" v-model="searchFormData.status">
                <el-option :value="1" label="正常"></el-option>
                <el-option :value="0" label="禁用"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 搜索 -->
          <el-col :span="5" :style="{ 'padding-left': '10px' }">
            <el-button-group>
              <el-button type="primary" @click="loadDataList">搜索</el-button>
            </el-button-group>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="data-list">
      <Table ref="tableRef" :columns="columns" :showPagination="true" :dataSource="tableData" :fetch="loadDataList"
        :options="tableOptions">
        <!-- 封面 -->
        <template #avatar="{ index, row }">
          <Avatar :userId="row.userId" :width="50"></Avatar>
        </template>
        <!--基本信息 -->
        <template #nickName="{ index, row }">
          {{ row.nickName }}
          <span v-if="row.sex">({{ row.sex == 0 ? "女" : "男" }})</span>
        </template>
        <!-- 登录信息 -->
        <template #loginInfo="{ index, row }">
          <div>最后登录时间：{{ row.lastLoginTime }}</div>
          <div>最后登录ip：{{ row.lastLoginIp }}</div>
          <div>最后登录地点：{{ row.lastLoginIpAddress }}</div>
        </template>
        <!-- 积分 -->
        <template #integral="{ index, row }">
          <div>总积分：{{ row.totalIntegral }}</div>
          <div>当前积分：{{ row.currentIntegral }}</div>
        </template>
        <!-- 状态 -->
        <template #status="{ index, row }">
          <div v-if="row.status == 1" :style="{ color: 'green' }">正常</div>
          <div v-else :style="{ color: 'red' }">禁用</div>
        </template>
        <!-- 操作信息 -->
        <template #op="{ index, row }">
          <div class="op" v-if="row.status != -1">
            <el-dropdown trigger="click">
              <span class="iconfont icon-more"></span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="updateUserStatus(row)">{{ row.status == 1 ? "禁用" : "启用"
                    }}</el-dropdown-item>
                  <el-dropdown-item @click="sendMessage(row)">发送系统消息</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </Table>
    </div>
    <!-- 发送消息 -->
    <SendMessage ref="sendMessageRef" @reload="loadDataList"></SendMessage>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";
import SendMessage from "./SendMessage.vue";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

const api = {
  loadDataList: "/user/loadUserList",
  updateUserStatus: "/user/updateUserStatus",
}

const searchFormData = ref({});

//表格列表配置
const columns = [
  {
    label: "头像",
    prop: "avatar",
    width: 80,
    scopedSlots: "avatar",
  },
  {
    label: "昵称",
    prop: "nickName",
    width: 150,
    scopedSlots: "nickName",
  },
  {
    label: "邮箱",
    prop: "email",
    width: 180,
  },
  {
    label: "个人描述",
    prop: "personDescription",
  },
  {
    label: "加入时间",
    prop: "joinTime",
    width: 180,
  },
  {
    label: "登录信息",
    prop: "lastLoginTime",
    width: 280,
    scopedSlots: "loginInfo",
  },
  {
    label: "积分",
    prop: "integral",
    width: 150,
    scopedSlots: "integral",
  },
  {
    label: "状态",
    prop: "status",
    width: 60,
    scopedSlots: "status",
  },
  {
    label: "操作",
    prop: "op",
    width: 80,
    scopedSlots: "op",
  },
]

const tableData = ref({})
const tableRef = ref()
const tableOptions = ref({
  extHeight: 80,
})

//加载表格数据
const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize,
  }

  Object.assign(params, searchFormData.value)

  let result = await proxy.request({
    url: api.loadDataList,
    params,
  });

  if (!result) {
    return;
  }

  tableData.value = result.data
}

//禁用
const updateUserStatus = (data) => {
  const title = data.status == 1 ? "禁用" : "启用";
  proxy.Confirm(`你确定要${title}用户${data.nickName}`, async () => {
    let result = await proxy.request({
      url: api.updateUserStatus,
      params: {
        userId: data.userId,
        status: data.status == 1 ? 0 : 1
      }
    })
    if (!result) {
      return;
    }
    loadDataList()
  })
}

//发送系统消息
const sendMessageRef = ref()
const sendMessage = (row) => {
  sendMessageRef.value.sendMessage(row)
}

</script>

<style scoped lang="scss"></style>